<template>
  <div class="error-404">
    <!--    <div class="head-footer-show"><pageHeader></pageHeader></div>-->
    <!--    <div class="headImage">-->
    <!--      <h1 style="margin-left: 18%;margin-top: 70px;">社会组织监管一件事</h1>-->
    <!--    </div>-->
    <div class="content">
      <div class="content-bg">
        <img src="../../assets/imgs/home/ykb_404.png" height="300" width="300" />
        <div class="content-title">尊敬的用户，您没有本应用访问权限。</div>
        <div class="content-info">
          本应用责任部门为<span style="color: #0C7CFF;">云阳县民政局</span>，
          <br />
          若您需使用本应用，请拨打联系电话<span style="color: #0C7CFF;">13668471656</span>，感谢您的理解与支持！
        </div>
        <div class="content-btn">
          <el-space>
            <!-- <el-link type="primary" class="actions-item" @click="goBack">返回上一页</el-link> -->
            <!-- <el-link type="primary" class="actions-item" @click="goHome">返回首页</el-link> -->
          </el-space>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { randomNum } from '@/utils'
import { appConfig } from '@/config'
import data404 from '@/assets/lottie/not-found-404.json'
import pageHeader from '@/views/yearCheck/ykb/other/pageheader.vue'
import pageFooter from '@/views/yearCheck/ykb/other/pagefooter.vue'
defineOptions({
  name: 'Error401'
})

const tips = [
  '我们怎么到这来了？',
  '看起来我们进入了错误的链接',
  '这是一个 401 页面',
  '这里什么都没有'
]

const tip = ref(tips[randomNum(0, tips.length - 1)])

const router = useRouter()
const goHome = () => {
  router.push({
    name: appConfig.routeMainName
  })
}

const goBack = () => {
  router.back()
}
</script>

<style scoped lang="scss">
.content-btn {
  margin-top: 30px;
}

.actions-item {
  font-size: 22px;
}

.content-info {
  margin-top: 30px;
  text-align: center;
  line-height: 40px;
}

.content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.content-title {
  width: 430px;
  height: 32px;
  font-family: MicrosoftYaHei-Bold;
  font-weight: 700;
  font-size: 24px;
  color: #333333;
  letter-spacing: 0;
  text-align: center;
  line-height: 60px;
}

.content-bg {
  width: 772px;
  height: 548px;
  background-image: linear-gradient(179deg, #EEF7FE 0%, #FFFFFF 18%);
  box-shadow: 0 2px 12px 0 #2789ee14;
  border-radius: 2px;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.headImage {
  background-image: url('@/assets/imgs/headimage.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 200px;
}

.error-404 {
  height: 100%;
  display: flex;
  flex-direction: column;
  //align-items: center;
  //justify-content: center;
  //transform: translateY(-60px);
  //
  //.lottie-box {
  //  width: 600px;
  //  height: 600px;
  //}
  //
  //.actions {
  //  font-size: 18px;
  //  color: #999999;
  //
  //  .actions-item {
  //    margin-top: 20px;
  //    font-size: 20px;
  //  }
  //}
}
</style>
